<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               :data="data">
      <template #status="{ size, row, index }">
        <el-tag :type="tagStatus(row.status)"
                :size="size">{{ row.$status }}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import useCurrentInstance from "../../utils/useCurrentInstance";
import {ref} from "vue";
import {listReport} from "../../api/data/report";

export default {
  name: "report",
  setup(props){
     const { proxy } = useCurrentInstance();

    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      viewBtn: false,
      selection: true,
      addBtn:false,
      editBtn:false,
      delBtn:false,
      searchLabelWidth:100,
      excelBtn:false,
      menu:false,
      labelWidth:120,
      searchIcon:true,
      searchIndex:7,
      align: 'center',
      column: [

        {
          label: '生产任务单编码',search: true,
          prop: "productionOrdersEncode",
          searchLabel: '任务单编码',
          width: 200,
        },
        {
          label: '生产工单编码',search: true,
          prop: "encode",  searchLabel: '工单编码',
          width: 200,
        },
        {
          label: '商品编码',
          prop: "productEncode",search: true,
          width: 150,display: false,
        },
        {
          label: '商品名称',
          prop: "productName",search: true,
          width: 150,display: false,
        },
        {
          label: '商品类型',
          prop: "productType",search: true,
          width: 150,display: false,
        },
        {
          label: '规格型号',
          prop: "specification",
          width: 150,display: false,
        },
        {
          label: '单位',
          prop: "unit",
          width: 150,display: false,
        },
        {
          label: '工单数量',
          prop: "workOrdersNumber",
          width: 150,display: false,
        },


        {
          label: '已生产数量',
          prop: "producedNumber",
          width: 150,display: false,
        },
        {
          label: '未生产数量',
          prop: "producedNumber",
          width: 150,display: false,
          render: ({row}) => {
            return Number(row.workOrdersNumber) - Number(row.producedNumber)
          }
        },
        {
          label: '合格数量',
          prop: "qualifiedNumber",
          width: 150,display: false,
        },
        {
          label: '不合格数量',
          prop: "unqualifiedNumber",
          width: 150,display: false,
        },
        {
          label: '生产进度',
          prop: "producedNumber",
          width: 150,display: false,
          render: ({row}) => {
            return (Number(row.producedNumber) / Number(row.workOrdersNumber) * 100).toFixed(2) + '%'
          }
        },
        {
          label: '状态',
          prop: "status",search: true, type: 'select',
          width: 150,display: false,
          dicData:[
            {label:'待生产',value:0},
            {label:'生产中',value:1},
            {label:'已完成',value:2},
          ],
        },
        {
          label: '工艺线路',
          prop: "craftName",search: true,
          width: 150,display: false,
        },
        {
          label: '计划生产日期',
          prop: "planProduceTime",
          width: 150,display: false,
          search:true,searchRange:true, type: 'date',
          format: 'YYYY-MM-DD HH:mm:ss',
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        {
          label: '计划完工日期',
          prop: "planFinishTime",
          width: 150,display: false,
          search:true,searchRange:true, type: 'date',
          format: 'YYYY-MM-DD HH:mm:ss',
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        {
          label: '交货日期',
          prop: "deliveryTime",
          width: 150,display: false,
          search:true,searchRange:true, type: 'date',
          format: 'YYYY-MM-DD HH:mm:ss',
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        {
          label: '生产日期',
          prop: "producedTime",
          width: 150,display: false,
        },
        {
          label: '领取人',search: true,
          prop: "receiveUserName",
          width: 150,display: false,
        },
        {
          label: '生产操作人', search: true,
          prop: "operateUserName",
          width: 150,display: false,
        },
        {
          label: '领取时间',
          prop: "receiveTime",
          width: 200,display: false,
          search:true,searchRange:true, type: 'date',
          format: 'YYYY-MM-DD HH:mm:ss',
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },

      ]
    });
    const loading = ref(true);
    const data = ref([]);
    const page = ref({pageSize: 10, currentPage: 1, total: 0})
     const form = ref({});
     const selectionList = ref([]);

     const queryParams = ref({});

    const onLoad = (pages, params = {}) => {
      loading.value = true;
      listReport(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list || [];
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }
    const tagStatus = (status)=>{
      if (status == 0) {
        return 'info'
      }else if (status == 1) {
        return 'success'
      }else if (status == 2) {
        return 'danger'
      }
    }
    const tagIsUrgent = (status)=>{
      if (status == 0) {
        return 'info'
      }else if (status == 1) {
        return 'danger'
      }
    }
    const handleView = (row)=>{

      // let list = [];
      // let params = {id: row.id ,encode:row.encode};
      // list.push(params);
      // formOption.value.detail = true;
      // formOption.value.menuBtn = false;
      // getPlanOrderDetails({list:list}).then(res => {
      //   dialog.value = true;
      //   dialogTitle.value = '详情';
      //   form.value = row;
      //   if (res.data.length > 0) {
      //     let resData = res.data[0];
      //     form.value.list = resData.list;
      //   }
      //
      // })

    }

    return {

      option,
      loading,
      data,
      page,
      form,
      queryParams,
      onLoad,
      refreshChange,
      searchChange,
      tagStatus,tagIsUrgent,
      handleView,
    }

  }
}
</script>

<style scoped>

</style>
